<template>
  <div class='login-wrap'>
    <div class="login-wrap-bg">
      <main-bg></main-bg>
    </div>
    <div class="login-wrap-con">
      <div class="top">
        <div class="back" @click="$router.back(-1)"></div>
        <div class="service" @click="toService"></div>
      </div>
      <div class="content">
        <p class="tit">请输入手机号</p>
        <div class="inp-box">
          <input type="number" oninput="if(value.length > 11)value = value.slice(0,11)" v-model="mobilNo"
          placeholder="输入手机号">
          <span v-if='mobilNo.length == 11' class="txt-delet" @click='mobilNo = "" '></span>
        </div>
        
        <div class="nnext" v-show="mobilNo.length != 11">下一步</div>
        <div class="next" v-show="mobilNo.length == 11" @click="nextBtn">下一步</div>
      </div>
      <div class="shadow" v-show="showImg">
        <div class="shadow-wrap">
          <div class="close" @click="showImg = false"></div>
          <input type="text" placeholder="请输入图形验证码"
            v-model="imgYzm" oninput="if(value.length > 4)value = value.slice(0,4)">
          <img class="imgYzm"
            :src="imgYzmUrl"
            alt="图形验证码" @click="changeUrl">
          <div :class="imgYzm.length == 4?'img-btn img-btn-sure':'img-btn'" @click="imgLogin">确定</div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  import {
    getStaticCode,
    getVPhone,
    customerService,
    checkMobile
  } from '@/request/api';
  import {
    Toast
  } from 'mint-ui';
  import mainBg from './bg';
  export default {
    data() {
      return {
        mobilNo: '',
        imgYzm: '',
        randomNum: '',
        showImg: false,
        codeNum: '',
        href: '',
        types: '',
        imgYzmUrl:''
      };
    },
    methods: {
      nextBtn() {
        this.showImg = true;
        this.changeUrl()
        checkMobile({
          mobilNo: this.mobilNo
        }).then(res => {
          if (res.data.code == 10003) {
            this.types = 0;
          } else if (res.data.code == 200) {
            this.types = 7;
          }
        })
      },
      changeUrl() {
        this.imgYzm = '';
        this.imgYzmUrl = this.keyUrl+'/base/getStaticCode?mobileNo='+this.mobilNo+'&rnd='+Math.random()
      },
      getCustomerService() {
        customerService().then(res => {
          this.href = res.data.data.url;
        })
      },
      toService() {
        window.location.href = this.href;
      },
      imgLogin() {
        getVPhone({
          mobileNo: this.mobilNo,
          types: this.types,
          imgYzm: this.imgYzm,
          areaCode: 86,
          channel: 'web'
        }).then(res => {
          if (res.data.code == 200) {
            this.$router.push({
              path: '/yzm',
              query: {
                tel: this.mobilNo,
                imgYzm: this.imgYzm,
                userid: this.$route.query.userid
              }
            })
          } else {
            Toast(res.data.message);
          }
        })

      }
    },
    components:{
      mainBg
    },
    created() {
      
      this.getCustomerService();
    },

  };

</script>

<style lang='scss' scoped>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
  .inp-box{
    position: relative;
    .txt-delet{
      position: absolute;
      width: 46px;
      height: 46px;
      top:30px;
      right: 0;
      background: url(../assets/images/icon_txt_delet.png) no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
    }
  }
  .login-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    &-bg{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 2;
    }
    &-con{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 4;
    }
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .back {
        width: 44px;
        height: 44px;
        background: url('../assets/images/back.png') no-repeat;
        background-size: cover;
        margin: 64px 0 0 34px;
      }

      .service {
        width: 44px;
        height: 44px;
        background: url('../assets/images/service.png') no-repeat;
        background-size: cover;
        margin: 64px 34px 0 0;
      }
    }

    .content {
      width: 550px;
      margin: auto;

      .tit {
        font-size: 46px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        padding: 52px 0 124px 0;
      }

      input {
        outline: none;
        border: 0;
        width: 100%;
        /* height: 100px; */
        background: none;
        font-size: 30px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
        line-height: 40px;
        text-indent: 30px;
        padding: 30px 0;
        border-radius: 0;
        border-bottom: 1px rgba(255,255,255,0.5) solid;
      }

      .nnext {
        width: 550px;
        height: 90px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 45px;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        color: rgba(255, 255, 255, 1);
        line-height: 90px;
        text-align: center;
        margin-top: 80px;
        color: #333;
      }

      .next {
        width: 550px;
        height: 90px;
        background: rgba(255, 255, 255, 1);
        border-radius: 45px;
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        color: rgba(255, 255, 255, 1);
        line-height: 90px;
        text-align: center;
        margin-top: 80px;
        color: #333;
      }
    }

    .shadow {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);

      .shadow-wrap {
        width: 590px;
        height: 358px;
        background: rgba(255, 255, 255, 1);
        border-radius: 20px;
        position: relative;
        top: 512px;
        left: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .close {
          width: 44px;
          height: 44px;
          background: url('../assets/images/close.png') center no-repeat;
          background-size:80% auto;
          position: absolute;
          top: 10px;
          right:10px;
        }

        input {
          border: 0;
          width: 460px;
          height: 98px;
          background: rgba(247, 245, 250, 1);
          border-radius: 6px;
          border: 1px solid rgba(191, 187, 201, 1);
          text-indent: 30px;
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000;
          margin: 40px auto 0;
          border-radius: 0;
        }

        .imgYzm {
          width: 140px;
          height: 68px;
          position: absolute;
          top: 86px;
          left: 354px;
        }

        .img-btn {
          width: 210px;
          height: 78px;
          background:rgba(0,0,0,0.4);
          border-radius: 40px;
          line-height: 78px;
          text-align: center;
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.4);
          &-sure{
            background:rgba(0,0,0,1);
            color: rgba(255, 255, 255,1);
          }
        }

      }

    }
  }

</style>
